<template>
  <a-card title="参评学生资格限定" :bordered="false">
    <a-form layout="vertical">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="学年学期">
            <a-select v-model="form.academicTerm" placeholder="请选择学年学期">
              <a-select-option value="2023-2024-1">2023-2024学年第一学期</a-select-option>
              <a-select-option value="2023-2024-2">2023-2024学年第二学期</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="学院">
            <a-select v-model="form.college" placeholder="请选择学院" @change="handleCollegeChange">
              <a-select-option v-for="college in colleges" :key="college.id" :value="college.id">
                {{ college.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="专业">
            <a-select v-model="form.major" placeholder="请选择专业">
              <a-select-option v-for="major in majors" :key="major.id" :value="major.id">
                {{ major.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="年级">
            <a-select v-model="form.grade" placeholder="请选择年级">
              <a-select-option value="2020">2020级</a-select-option>
              <a-select-option value="2021">2021级</a-select-option>
              <a-select-option value="2022">2022级</a-select-option>
              <a-select-option value="2023">2023级</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="班级">
            <a-select v-model="form.class" placeholder="请选择班级">
              <a-select-option v-for="cls in classes" :key="cls.id" :value="cls.id">
                {{ cls.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="学生类型">
            <a-select v-model="form.studentType" placeholder="请选择学生类型">
              <a-select-option value="1">全日制</a-select-option>
              <a-select-option value="2">非全日制</a-select-option>
              <a-select-option value="3">留学生</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="成绩要求">
        <a-checkbox-group v-model="form.scoreRequirements">
          <a-checkbox value="pass">及格以上</a-checkbox>
          <a-checkbox value="good">良好以上</a-checkbox>
          <a-checkbox value="excellent">优秀</a-checkbox>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="其他条件">
        <a-textarea v-model="form.otherConditions" placeholder="请输入其他限定条件" :rows="3" />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="handleSubmit">保存设置</a-button>
        <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>

    <a-divider />

    <a-table
      :columns="studentColumns"
      :data-source="studentData"
      :pagination="false"
      row-key="id"
      size="middle"
    >
      <template slot="action" slot-scope="text, record">
        <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" size="small" @click="handleDelete(record)">删除</a-button>
      </template>
    </a-table>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      form: {
        academicTerm: undefined,
        college: undefined,
        major: undefined,
        grade: undefined,
        class: undefined,
        studentType: undefined,
        scoreRequirements: [],
        otherConditions: ''
      },
      colleges: [
        { id: '1', name: '计算机科学与技术学院' },
        { id: '2', name: '电子信息工程学院' },
        { id: '3', name: '机械工程学院' },
        { id: '4', name: '经济管理学院' }
      ],
      majors: [],
      classes: [],
      studentColumns: [
        {
          title: '学号',
          dataIndex: 'studentId',
          key: 'studentId'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '学院',
          dataIndex: 'college',
          key: 'college'
        },
        {
          title: '专业',
          dataIndex: 'major',
          key: 'major'
        },
        {
          title: '年级',
          dataIndex: 'grade',
          key: 'grade'
        },
        {
          title: '班级',
          dataIndex: 'class',
          key: 'class'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      studentData: [
        {
          id: '1',
          studentId: '2020114512',
          name: '刘洋',
          college: '计算机科学与技术学院',
          major: '计算机科学与技术',
          grade: '2020级',
          class: '计算机2001班'
        },
        {
          id: '2',
          studentId: '2021114523',
          name: '赵宇',
          college: '电子信息工程学院',
          major: '电子信息工程',
          grade: '2021级',
          class: '电子2102班'
        }
      ]
    }
  },
  methods: {
    handleCollegeChange(value) {
      // 模拟根据学院获取专业
      this.majors = [
        { id: '101', name: '计算机科学与技术' },
        { id: '102', name: '软件工程' },
        { id: '103', name: '人工智能' }
      ]
      this.form.major = undefined
    },
    handleSubmit() {
      this.$message.success('保存成功')
    },
    handleReset() {
      this.form = {
        academicTerm: undefined,
        college: undefined,
        major: undefined,
        grade: undefined,
        class: undefined,
        studentType: undefined,
        scoreRequirements: [],
        otherConditions: ''
      }
    },
    handleEdit(record) {
      this.$message.info(`编辑学生 ${record.name}`)
    },
    handleDelete(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除学生 ${record.name} 吗?`,
        onOk: () => {
          this.$message.success('删除成功')
        }
      })
    }
  }
}
</script>